<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    v-if:当条件为false时，包含v-if指令的元素，根本就不会再DOM中
        v-show:当条件为false时，v-show只是给元素增加了一个行内样式display:none，但元素依然存在DOM中
        在开发中，当需要在显示和隐藏切换频率高的时候，选择v-show ，当只有一次切换的时候，选v-if
        -->
    <h2 v-if="isShow" id="aaa">{{message}}</h2>
    <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>



<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好呀',
            isShow : true
        }
    })
</script>

</body>
</html>